<template>
  <div v-show="true">
    <div style="height: 800px; width: 95%; border: 0px solid black; position: relative; left: 2.5%;">
      <div style="height: 100%; width: 35%; border: 1px solid black; float: left; box-shadow: 0 0 25px #909399; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;">

        <div style="height: 100%; width: 95%; position: relative; left: 2.5%; padding: 12px 0">
          <el-form style="margin-top: 20px" label-width="80px">
            <el-form-item label="接口名称">
              <el-input v-model="ItfForm.itfName" :placeholder="ItfForm.itfName"></el-input>
              <el-button icon="el-icon-search" circle style="position: absolute; right: 2px;" @click="queryItf"></el-button>
            </el-form-item>
            <el-form-item label="接口URL">
              <el-input v-model="ItfForm.itfUrl" :placeholder="ItfForm.itfUrl"></el-input>
              <el-button icon="el-icon-search" circle style="position: absolute; right: 2px;" @click="queryItf"></el-button>
            </el-form-item>
            <el-form-item label="接口方式">
              <el-select v-model="ItfForm.itfMethod" :placeholder="ItfForm.itfMethod" style="width: 100%">
                <el-option label="GET" value="GET"></el-option>
                <el-option label="POST" value="POST"></el-option>
                <el-option label="PUT" value="PUT"></el-option>
                <el-option label="DELETE" value="DELETE"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="响应规则" v-show="respParamsVisible">
<!--              <el-input-->
<!--                style="font-size: 16px;"-->
<!--                type="textarea"-->
<!--                :rows="5"-->
<!--                v-model="ItfForm.respParams">-->
<!--              </el-input>-->
                <div v-html="'<pre>'+ItfForm.respParams+'</pre>'"></div>
            </el-form-item>
            <el-button round style="width: 37%; position: relative; left: 10%; margin: 10px" @click="lookRespParams">查看响应规则</el-button>
            <el-button round style="width: 37%; position: relative; left: 10%; margin: 10px" @click="clearBtn">重置</el-button>
            <el-button type="primary" round style="width: 80%; position: relative; left: 10%;" @click="mock">MOCK</el-button>
          </el-form>
        </div>

        </div>
        <div style="height: 100%; width: 65%; border: 1px solid black; float: left; box-shadow: 0 0 25px #909399; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;">
          <div style="height: 100%; width: 95%; position: relative; left: 2.5%; padding: 12px 0">
            <div v-show="resultDataVisible">
              <!-- 响应结果DIV -->
              <h3 style="margin-top: 20px">响应结果</h3><br>
              <div v-html="'<pre>'+mockData+'</pre>'"></div> <!--预格式化展示-->
              <!-- 响应结果DIV -->
            </div>
            <div v-show="queryResultVisible">
              <h3 style="margin-top: 20px">查询结果</h3><br>
              <template>
                <el-table
                  class="interface-table"
                  ref="multipleTable"
                  :data="resultTableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @row-dblclick="handleDbClick"
                  >
                  <el-table-column type="expand">
                    <template slot-scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="接口ID">
                          <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="接口名称">
                          <span>{{ props.row.itfName }}</span>
                        </el-form-item>
                        <el-form-item label="请求方式">
                          <span>{{ props.row.itfMethod }}</span>
                        </el-form-item>
                        <el-form-item label="响应规则">
                          <span>{{ props.row.respParams }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间">
                          <span>{{ props.row.createTime }}</span>
                        </el-form-item>
                        <el-form-item label="更新时间">
                          <span>{{ props.row.updateTime}}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="id"
                    label="接口ID"
                    width="70">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="itfName"
                    label="接口名称"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="itfUrl"
                    label="接口路径"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="itfMethod"
                    label="请求方式"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    align="center"
                    prop="createTime"
                    label="创建时间"
                    width="200">
                  </el-table-column>
                </el-table>
                <div>
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="curPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="ItfForm.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
                </div>
              </template>
            </div>
          </div>
        </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "DataGenerator",
    props: {
    },
    data() {
      return {
        /*分页*/
        total: 0,
        pages: 0,
        ItfForm: {
          curPage: 1,
          size: 5,
          itfName: '',
          itfUrl: '',
          itfMethod: '',
          respParams: '',
        },
        respParamsVisible: false, //响应参数DIV
        count: 0,
        queryResultVisible: false, //查询结果DIV
        resultTableData: [], //查询结果列表数据
        mockData: '', //mock结果
        resultDataVisible: true, //mock结果DIV
      }
    },
    mounted: function(){
    },
    computed: {
      headers() {
        return {
          Authentication: this.$store.state.token,
          RefreshToken: this.$store.state.refresh_token
        };
      }
    },
    methods: {
      lookRespParams(){
        this.count++;
        if(this.count % 2 === 1){
          this.respParamsVisible = true;
        }else{
          this.respParamsVisible = false;
        }
      },
      //查询已注册的接口
      queryItf(){
          this.resultDataVisible = false;
          this.queryResultVisible = true;
          this.$http.post("/mock/interface/query/list", {
            "curPage": this.ItfForm.curPage,
            "size": this.ItfForm.size,
            "itfName": this.ItfForm.itfName,
            "itfUrl": this.ItfForm.itfUrl,
            "itfMethod": this.ItfForm.itfMethod
          }).then(resp => {
            if(resp.data.errCode === 200){
              this.total = resp.data.data.totals;
              this.pages = resp.data.data.pages;
              this.resultTableData = resp.data.data.data;
            }
          });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.ItfForm.size = val;
        this.queryItf();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ItfForm.curPage = val;
        this.queryItf();
      },
      handleDbClick(row, column, event){
        console.log(row, column, event);
        this.queryResultVisible = false;
        this.resultDataVisible = true;
        this.mockData = '';
        this.ItfForm.itfName = row.itfName;
        this.ItfForm.itfUrl = row.itfUrl;
        this.ItfForm.itfMethod = row.itfMethod;
        this.ItfForm.respParams = JSON.stringify(row.respParams, null, 4);
      },
      //mock数据
      mock(){
        this.queryResultVisible = false;
        this.$http.post("/mock/interface/debug", {
          "itfName": this.ItfForm.itfName,
          "itfUrl": this.ItfForm.itfUrl,
          "itfMethod": this.ItfForm.itfMethod,
          "respParams": JSON.parse(this.ItfForm.respParams)
        }).then(resp => {
          if (resp.data.errCode === 200){
            console.log(resp.data.data);
            this.mockData = JSON.stringify(resp.data.data, null, 4);
          }else {
            this.$message.error(resp.data.errCode + " : " + resp.data.errMsg);
          }
        });
      },
      //清除
      clearBtn(){
        this.ItfForm= {
            curPage: 1,
            size: 5,
            itfName: '',
            itfUrl: '',
            itfMethod: '',
            respParams: '',
        }
      }
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
